<script setup lang="ts">
import { useMenuStore } from '@/pinia/useMenuStore';
import useLoginStore from '@/pinia/useLoginStore';
import { Local, Session } from '@/utils/storage';

const router = useRouter();

const LoginStore = useLoginStore();
const { userInfo } = storeToRefs(LoginStore);

const MenuStore = useMenuStore();
const { isCollapse } = storeToRefs(MenuStore);
const handleCollapse = () => {
  MenuStore.setCollapse();
};

const fullScreen = () => {
  document.documentElement.requestFullscreen();
};

const handleDropdown = (command: number) => {
  switch (command) {
    case 1:
      router.push('/');
      break;
    case 2:
      window.open('https://gitee.com/z_webfrontend/project', '_blank');
      break;
    default:
      Local.clear();
      Session.clear();
      router.push('/');
      break;
  }
};
</script>

<template>
  <div class="flex justify-between p-2 border-b border-gray-200">
    <div class="breadcrumb flex items-center">
      <MyImg :name="isCollapse ? 'ele-Expand' : 'ele-Fold'" :size="18" class="mr-2 cursor-pointer" @click="handleCollapse" />
      <el-breadcrumb>
        <transition-group name="breadcrumb">
          <el-breadcrumb-item to="/">
            <span class="text-xs md:text-sm">首页</span>
          </el-breadcrumb-item>
          <template v-if="$route.matched">
            <el-breadcrumb-item :to="v.path" v-for="v in $route.matched" :key="v.path">
              <span class="text-xs md:text-sm">{{ v.meta.title }}</span>
            </el-breadcrumb-item>
          </template>
        </transition-group>
      </el-breadcrumb>
    </div>
    <div class="flex justify-center items-center">
      <MyImg name="ele-FullScreen" :size="20" class="!hidden md:!block cursor-pointer mr-5" @click="fullScreen" />
      <el-dropdown @command="handleDropdown">
        <div class="flex justify-center items-center">
          <el-avatar :size="28" :src="userInfo.avatar_url" @error="userInfo.avatar_url === '' ? true : false">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
          </el-avatar>
          <span class="max-w-[82px] mx-2 v-line-1">admin</span>
          <MyImg name="ele-ArrowDown" />
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item :command="1">首页</el-dropdown-item>
            <el-dropdown-item :command="2">gitee仓库</el-dropdown-item>
            <el-dropdown-item :command="3" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
